<template>
  <el-dialog :title="`${form.patCfgId ? '修改' : '添加'}巡更配置`" :visible.sync="show" :close-on-click-modal="false" :show-close="!btnLoading" width="800px" @closed="closed">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item prop="patCfgId" class="hide" />
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="巡更类型" prop="patrolTypeId" style="height: 36px">
            <treeselect v-model="form.patrolTypeId" :options="patTypeTree" :normalizer="patTypeNormalizer" disable-branch-nodes show-count placeholder="请选择巡更类型" :disabled="isEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配置类型" prop="cfgType">
            <el-select v-model="form.cfgType" placeholder="请选择配置类型" filterable style="width: 100%" @change="changeCfgType">
              <el-option v-for="dict in dict.type.patrol_cfg_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="showPlanLabel" prop="planName"><el-input v-model.trim="form.planName" :placeholder="`请输入${showPlanLabel}`" :maxlength="100" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否为关键工序" prop="isKp" required label-width="110px">
            <el-radio-group v-model="form.isKp">
              <el-radio v-for="dict in yesOrNo" :key="dict.value" :label="+dict.value">{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12" v-if="showCycleType">
          <el-form-item label="重复次数" prop="cycleType" required key="cycleType">
            <div style="display: flex">
              <div class="el-input-group el-input-group--prepend el-input-group--append" style="flex: 3">
                <div class="el-input-group__prepend" style="padding: 0 10px">每</div>
                <el-input-number v-model="form.cycleCount" :min="1" :max="1e8" :precision="0" :controls="false" style="width: 100%" />
                <div class="el-input-group__append">
                  <el-select v-model="form.cycleType" placeholder="日" style="width: 60px">
                    <el-option v-for="item in cycleTypeList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </div>
              <div class="el-input-group el-input-group--append" style="flex: 2; margin-left: 10px">
                <el-input-number v-model="form.times" :min="1" :max="1e8" :precision="0" :controls="false" style="width: 100%" />
                <div class="el-input-group__append" style="padding: 0 10px">次</div>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完成任务天数" prop="daysCounts">
            <div class="el-input-group el-input-group--append">
              <el-input-number v-model="form.daysCounts" :min="1" :max="1e8" :precision="0" :controls="false" style="width: 100%" />
              <div class="el-input-group__append">天</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="开始触发条件" prop="entryCondition"><el-input v-model="form.entryCondition" type="textarea" placeholder="请输入内容" :maxlength="2000" /></el-form-item>
      <el-form-item label="结束触发条件" prop="exitCondition"><el-input v-model="form.exitCondition" type="textarea" placeholder="请输入内容" :maxlength="2000" /></el-form-item>
      <el-form-item label="配置描述" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入配置描述信息" :maxlength="255" /></el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 添加或修改巡更配置
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { nameRule } from '@/utils/validate'
import { flatList2tree } from '@/utils'
import { editFormMixin } from '@/utils/mixin'
import { yesOrNo } from '@/utils/baseData'
import { listPatType, addPatCfg, setPatCfg } from '@/api/cq/patrol'
import { SYS_TASK, cycleTypeList } from '../utils/common'
export default {
  components: { Treeselect },
  mixins: [editFormMixin],
  dicts: ['patrol_cfg_type'],
  data() {
    return {
      yesOrNo,
      cycleTypeList,
      primaryKey: 'patCfgId',
      addApi: addPatCfg,
      updateApi: setPatCfg,
      form: {
        patCfgId: '',
        patrolTypeId: null,
        planName: '',
        isKp: 0,
        cfgType: '',
        cycleCount: 1,
        cycleType: 'DAY',
        times: 1,
        daysCounts: 1,
        entryCondition: '',
        exitCondition: '',
        remark: ''
      },
      rules: {
        patrolTypeId: [{ required: true, message: '请选择巡更类型' }],
        planName: [{ required: true, message: '请输入名称' }, nameRule],
        isKp: [{ required: true, message: '请选择是否为关键工序' }],
        cfgType: [{ required: true, message: '请选择配置类型' }],
        cycleType: [
          {
            validator: (rule, val, cb) => {
              if (!val) return cb('请选择重复类型')
              if (!this.form.cycleCount || !this.form.times) return cb('请输入重复次数')
              cb()
            }
          }
        ],
        daysCounts: [{ required: true, message: '请输入完成任务天数' }]
      },
      patTypeLoading: false,
      patTypeTree: []
    }
  },
  computed: {
    isEdit() {
      return !!this.form.patCfgId
    },
    showCycleType() {
      return this.form.cfgType !== SYS_TASK
    },
    showPlanLabel() {
      return this.showCycleType ? '计划名称' : '任务名称'
    }
  },
  methods: {
    closed() {
      this.$refs.form.resetFields()
    },
    async opened(item = {}) {
      this.getPatTypeList()
    },
    async getPatTypeList() {
      this.patTypeLoading = true
      const res = await listPatType().catch(() => false)
      this.patTypeLoading = false
      if (res === false) return

      let data = res.data || []
      data = flatList2tree(data, { id: 'patTypeId' })
      this.patTypeTree = data
    },
    patTypeNormalizer(node) {
      if (!node.children?.length) delete node.children
      return { id: node.patTypeId, label: node.patTypeName, children: node.children }
    },
    changeCfgType(val) {
      if (val === SYS_TASK) {
        this.form.cycleCount = null
        this.form.cycleType = null
        this.form.times = null
      } else {
        this.form.cycleCount = 1
        this.form.cycleType = 'DAY'
        this.form.times = 1
      }
    }
  }
}
</script>
